<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付确认 - 编源软件</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="payment-body">
    <header class="main-header">
        <div class="header-content">
            <div class="logo">
                <h1><i class="fas fa-code"></i> 编源软件</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="products.html"><i class="fas fa-laptop-code"></i> 商品和服务</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="payment-page">
        <div class="payment-container">
            <div class="payment-header">
                <h2><i class="fas fa-shopping-cart"></i> 订单确认</h2>
                <p class="payment-subtitle">请确认您的订单信息并完成支付</p>
            </div>

            <div class="order-details">
                <div class="order-header">
                    <h3><i class="fas fa-file-invoice"></i> 订单信息</h3>
                    <span class="order-number">订单号：ORDER-<span id="orderNumber"></span></span>
                </div>
                <div class="product-info">
                    <div class="product-icon-large">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="product-details">
                        <h4 id="productName">加载中...</h4>
                        <p id="productPrice" class="price-tag">价格：¥0</p>
                    </div>
                </div>
            </div>

            <div class="payment-form-container">
                <h3><i class="fas fa-user"></i> 联系信息</h3>
                <form id="paymentForm" action="#" method="POST">
                    <div class="form-grid">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" id="name" name="name" required placeholder="请输入您的姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号</label>
                            <div class="input-with-icon">
                                <i class="fas fa-phone"></i>
                                <input type="tel" id="phone" name="phone" required placeholder="请输入您的手机号">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <div class="input-with-icon">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="email" name="email" required placeholder="请输入您的邮箱">
                        </div>
                    </div>

                    <div class="payment-methods-section">
                        <h3><i class="fas fa-credit-card"></i> 支付方式</h3>
                        <div class="payment-methods">
                            <label class="payment-method-card">
                                <input type="radio" name="payment" value="alipay" checked>
                                <span class="payment-method-content">
                                    <i class="fab fa-alipay"></i>
                                    <span>支付宝</span>
                                </span>
                            </label>
                            <label class="payment-method-card">
                                <input type="radio" name="payment" value="wechat">
                                <span class="payment-method-content">
                                    <i class="fab fa-weixin"></i>
                                    <span>微信支付</span>
                                </span>
                            </label>
                        </div>
                    </div>

                    <div class="payment-summary">
                        <div class="summary-item">
                            <span>商品金额</span>
                            <span id="summaryPrice">¥0</span>
                        </div>
                        <div class="summary-item total">
                            <span>应付金额</span>
                            <span id="totalPrice">¥0</span>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn">
                        <i class="fas fa-lock"></i> 安全支付
                    </button>
                </form>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-info">
                <p>&copy; 2024 编源软件 版权所有</p>
                <p>备案号：粤ICP备2023018103号-2</p>
            </div>
            <div class="footer-social">
                <a href="#"><i class="fab fa-weixin"></i></a>
                <a href="#"><i class="fab fa-weibo"></i></a>
            </div>
        </div>
    </footer>

    <script>
        // 生成随机订单号
        document.getElementById('orderNumber').textContent = Math.random().toString(36).substr(2, 8).toUpperCase();

        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const productName = urlParams.get('product');
        const productPrice = urlParams.get('price');

        // 更新页面显示
        if (productName && productPrice) {
            document.getElementById('productName').textContent = productName;
            document.getElementById('productPrice').textContent = `价格：¥${productPrice}`;
            document.getElementById('summaryPrice').textContent = `¥${productPrice}`;
            document.getElementById('totalPrice').textContent = `¥${productPrice}`;
        }

        // 表单提交处理
        document.getElementById('paymentForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('支付功能开发中，请联系客服完成付款！');
        });
    </script>
</body>
</html> 